<template>
  <div id="expert-search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        shape="round"
        :autofocus="onfocus"
        placeholder="搜索医生、服务名称"
        @cancel="onCancel"
        @search="onSearch"
      />
    </form>

    <van-pull-refresh
      v-model="isLoading.state"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="content">
        <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多内容了"
          @load="onLoad"
          offset="10"
          :immediate-check="false"
        >
          <ul>
            <li
              class="details"
              v-for="value in ExpertList.arr"
              :key="value._id"
            >
              <div class="details-top">
                <div class="details-top-left">
                  <p class="details-titile">
                    <span>{{ value.servicetype }}</span>
                    <span>({{ value.inquiry }})</span>
                  </p>
                  <p class="details-equity">
                    <span v-for="item in value.equitytype" :key="item">{{
                      item
                    }}</span>
                    <span>等{{ value.equitynum }}项权益</span>
                  </p>
                </div>
                <div class="details-top-right">
                  <p class="details-money">￥{{ value.currentmoney }}</p>
                  <p class="details-mo">￥{{ value.oldmoney }}</p>
                </div>
              </div>
              <div class="details-foolter">
                <van-image round :src="prefix + value.imgUrl" />
                <div class="foolter-top-left">
                  <p class="foolter-titile">
                    <span>{{ value.doctor }}</span>
                    <span class="doctortype">{{ value.doctortype }}</span>
                  </p>
                  <p class="foolter-equity">
                    <span>{{ value.hospital }}</span>
                    <span style="margin-left: 10px">{{
                      value.department
                    }}</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { getExpertApi, getExpertsearchApi } from "../utils/api";
export default {
  setup() {
    const value = ref("");
    const onfocus = ref(true);
    //取消按钮事件
    const router = useRouter();
    const onCancel = () => {
      router.go(-1);
    };
    //获取全部数据
    let prefix = ref("");
    const isLoading = reactive({
      state: false,
    });
    let ExpertList = reactive({ arr: [] });
    let currpage = ref(1);
    //下拉加载
    const state = reactive({
      finished: false,
      loading: true,
    });
    //页面到底触发onload
    const onLoad = () => {
      setTimeout(async () => {
        if (isLoading.state) {
          ExpertList.arr = [];
          isLoading.state = false;
          currpage.value = 1;

          const res = await getExpertApi({
            curr: currpage.value,
            pagesize: 5,
            token: sessionStorage.getItem("token"),
          });
          if (res.result.length === 0) {
            state.finished = true;
          } else {
            prefix.value = res.prefix;
            ExpertList.arr = ExpertList.arr.concat(res.result);
            state.loading = false;
            currpage.value++;
          }
        } else {
          const res = await getExpertApi({
            curr: currpage.value,
            pagesize: 5,
            token: sessionStorage.getItem("token"),
          });
          if (res.result.length === 0) {
            state.finished = true;
          } else {
            prefix.value = res.prefix;
            ExpertList.arr = ExpertList.arr.concat(res.result);
            state.loading = false;
            currpage.value++;
          }
        }
      }, 500);
    };
    const onRefresh = () => {
      // 清空列表数据
      state.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      onLoad();
    };

    //搜索事件
    const onSearch = async (val) => {
      const res = await getExpertsearchApi({
        token: sessionStorage.getItem("token"),
        doctor: val,
      });
       prefix.value = res.prefix;
      ExpertList.arr = res.result;
    };

    return {
      value,
      onCancel,
      onfocus,
      isLoading,
      onRefresh,
      ExpertList,
      currpage,
      prefix,
      // getExpertList,
      onLoad,
      state,
      onSearch,
    };
  },
};
</script>
<style lang="less" scoped>
#expert-search {
  .content {
    background: #f5f5f5;
    width: 100%;
    padding: 12px;
    .details {
      margin-top: 10px;
      width: 100%;
      height: 145px;
      background: #ffffff;
      border-radius: 10px;
      padding: 14px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .details-top {
        display: flex;
        justify-content: space-between;
        .details-top-left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 235px;
          height: 50px;
          .details-titile {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .details-equity {
            width: 100%;
            height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #999999;
          }
        }
        .details-top-right {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .details-money {
            height: 16px;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #f70c0a;
            text-align: right;
          }
          .details-mo {
            height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            text-decoration: line-through;
            color: #999999;
            text-align: right;
          }
        }
      }
    }
    .details-foolter {
      width: 100%;
      background: #f7f8fa;
      border-radius: 10px;
      padding: 8px 13px;
      display: flex;
      .van-image {
        width: 35px;
        height: 38px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .foolter-top-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 235px;
        margin-left: 10px;
        .foolter-titile {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          .doctortype {
            margin-left: 10px;
            font-size: 13px;
          }
        }
        .foolter-equity {
          width: 225px;
          height: 20px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #999999;
        }
      }
    }
  }
}
</style>
